<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import { Delete } from '@element-plus/icons-vue';

const props = defineProps<{
  modelValue?: any[] | any;
}>();
const emit = defineEmits(['update:modelValue']);
const value = useVModel(props, 'modelValue', emit);

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { money, price_unit, other_fee_type } = toRefs<any>(proxy?.useDict('money', 'price_unit', 'other_fee_type'));

// 添加规则（整个一行）
const add = () => {
  if (value.value) {
    value.value.push({ 'otherFeeType': '', 'otherFeeAmount': '', 'currency': '', 'priceUnit': '' });
  } else {
    value.value = [{ 'otherFeeType': '', 'otherFeeAmount': '', 'currency': '', 'priceUnit': '' }];
  }
  nextTick(() => {
    for (let i = 0; i < value.value.length; i++) {
      let len = value.value[i].list.length;
      for (let j = 0; j < 3 - len; j++) {
        value.value[i].list.push(undefined);
      }
    }
  });
};
// 移除一条规则（整个一行）
const remove = (i) => {
  value.value.splice(i, 1);
};
</script>

<template>
  <div class="w-full bg-gray/10 rounded-1 pa-2">
    <div class="flex mb-2">
      <div class="flex-1">费用类型</div>
      <div class="flex-1">费用</div>
      <div class="flex-1">计价单位</div>
    </div>

    <div v-for="(_, i) in value" :key="i" class="flex mb-2">
      <el-select v-model="value[i]['otherFeeType']" placeholder="请输入费用类型">
        <el-option v-for="dict in other_fee_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
      </el-select>
      <el-input v-model="value[i]['otherFeeAmount']" type="number" placeholder="请输入费用" />
      <el-select v-model="value[i]['currency']">
        <el-option v-for="dict in money" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
      </el-select>
      <el-select v-model="value[i]['priceUnit']" placeholder="计价单位">
        <el-option v-for="dict in price_unit" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
      </el-select>
      <el-button class="ml-2" color="red" plain @click="remove(i)">
        <el-icon class="mr-1">
          <Delete />
        </el-icon>
        删除
      </el-button>
    </div>
    <el-button class="w-full" color="green" plain @click="add">添加规则</el-button>
  </div>
</template>

<style scoped lang="scss"></style>
